
import React, { useState, useEffect } from 'react'
import { Layout, Row, Col, Button, Modal, message, Tabs, Table } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import QRCode from "qrcode.react";
import copy from "copy-to-clipboard";
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import UserMenu from '@/components/userMenu'
import API from '@/api/api'
import coinBtc from '../../assets/img/icon/btc.png'
import coinUsdt from '../../assets/img/icon/usdt.png'
import coinEth from '../../assets/img/icon/eth.png'
import coinIpfs from '../../assets/img/icon/ipfs.png'
import './index.scss';
const { Content } = Layout;
const { TabPane } = Tabs;
const { Column } = Table;

function Withdraw(props) {
    const [load, setLoad] = useState(true)
    const [type, setType] = useState('withdraw')
    const [recordList, setRecordList] = useState()
    const [coinName, setCoinName] = useState()
    const [total, setTotal] = useState(0)
    const coinImg = { 'BTC': coinBtc, 'USDT': coinUsdt, 'ETH': coinEth, 'FIL': coinIpfs }

    useEffect(() => {
        getWithdrawBills()
    }, [type])

    const getWithdrawBills = async (page = 1) => {
        let type = props.match.params.type
        let name = props.match.params.name
        let opts = { coinName: name, page: page }
        if (type === 'withdraw') { opts.action = '6,7' } else { opts.action = '5' }
        let res = await API.walletBills(opts)
        if (res) {
            setCoinName(name)
            setTotal(res.data.total)
            setLoad(false)
        } else {
            setLoad(false)
        }
    }
    
    const tabChange = (e) => {
        setType(e)
        props.history.push(`/walletRecord/${e}/${coinName}`)
    }

    const operations = {
        left: <p className="wallet-back" onClick={() => props.history.push('/wallet')}><LeftOutlined />上一页</p>,
        right: null,
    }

    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <Row className="wallet main" justify="space-between">
                    <Col lg={4} md={20}>
                        <UserMenu current="3" />
                    </Col>
                    <Col className="wallet-main" lg={19} md={20}>
                        <Row align="middle">
                            <Tabs className="wallet-title" defaultActiveKey="withdraw" onChange={tabChange} tabBarExtraContent={operations}>
                                <TabPane tab="充值记录" key="withdraw">
                                    <Table className="withdraw-table" dataSource={recordList} pagination={false}  >
                                        <Column title="币种" render={tags => (
                                            <>
                                                {tags.name}
                                            </>
                                        )} />
                                        <Column title="时间" key="time" name="time" />
                                        <Column title="充值数量" key="num" name="num" />
                                        <Column title="充值地址" key="address" name="address" />
                                    </Table>
                                </TabPane>
                                <TabPane tab="提现记录" key="rechange">
                                        
                                </TabPane>
                            </Tabs>
                        </Row>
                    </Col>
                </Row>

            </Content>
            <FooterBox />
        </Layout>
    )
}

export default Withdraw